<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户登录</title>
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
		<style>
			body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        #loginForm {
            background-color: #fff;
            width: 300px;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }
        h1 {
            text-align: center;
            margin-bottom: 20px;
        }
        div {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input[type="text"], input[type="password"] {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        button {
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
    </style>
	</head>
	<body>
		<div id="app">
			<div id="loginForm" v-if="!isLogin">
				<h1>登录页面</h1>
				<div>
					<label for="username">用户名:</label>
					<input type="text" id="username" v-model="username" />
				</div>
				<div>
					<label for="password">密码:</label>
					<input type="password" id="password" v-model="password" />
				</div>
				<div>
					<button @click="login">登录</button>
				</div>
			</div>
			<div v-else>
				<p>{{ username }} 已登录</p>
				<div>
					<button @click="loginOut">登出</button>
				</div>
			</div>
		</div>

		<script>
			var app = Vue.createApp({
				data() {
					return {
						username: '',
						password: '',
						isLogin: false
					}
				},
				methods: {
					login: function() {
						if (this.username === "admin" && this.password === "123") {
							alert("登录成功");
							this.isLogin = true;
						} else {
							alert("登录失败");
						}
					},
					loginOut: function() {
						this.isLogin = false;
					}
				}
			});
			var vm = app.mount("#app");
		</script>
	</body>
</html>
